<template>
  <div class="mian">
    <!-- <v-head :headTitle="details.title">
    </v-head>-->
    <!-- 分享弹窗 -->
    <div class="toast" v-show="showtoast">
      <div @click="showtoast = false" class="turnoff"></div>
      <div class="toceter">
        <canvas
          id="myCanvas"
          width="1080"
          height="1900"
          style="display:none;border: 2px solid grey;"
          class="cavas"
        ></canvas>
        <div id="qrcode" style="display:none"></div>
        <img class="recurit-jpg" src alt />
        <div class="bottomtext">
          <span class="haibaotext"></span> 长按海报保存到手机
        </div>
      </div>
    </div>
    <div class="detail" ref="detail">
      <div class="details_page">
        <div class="content">
          <!-- 轮播 -->
          <van-swipe :autoplay="3000">
            <van-swipe-item v-for="(image, index) in images" :key="index">
              <img v-lazy="imgBaseUrl + image" />
            </van-swipe-item>
          </van-swipe>
          <div class="seckilltime">
            <p>{{seckilltime}}</p>
            <div class="acttime" v-if="seckilltime != '本周秒杀已结束'">
              <div class="green">{{timer.d}}</div>&nbsp;天&nbsp;
              <div class="green">{{timer.h &lt;'10'?('0'+timer.h):timer.h}}</div>&nbsp;时&nbsp;
              <div class="green">{{timer.m &lt;'10'?('0'+timer.m):timer.m}}</div>&nbsp;分&nbsp;
              <div class="green">{{timer.s &lt;'10'?('0'+timer.s):timer.s}}</div>&nbsp;秒&nbsp;
            </div>
          </div>
          <!-- 产品信息 -->
          <div class="product-wrapper">
            <div>
              <h1 class="title">{{details.title}}</h1>
              <!-- <p class="subTitle">{{details.realSubTitle}}</p> -->
              <p
                class="integral"
              >{{details.coin == 0 && details.price == 0? '0元':details.coin == 0 && details.price > 0?`${details.price}元`:details.coin > 0 && details.price > 0?`${details.coin}积分+${details.price}元`:`${details.coin}积分`}}</p>
              <p class="integral">
                {{details.vipCoin == 0 && details.price == 0? '0元':details.vipCoin == 0 && details.price > 0?`${details.price}元`:details.vipCoin > 0 && details.price > 0?`${details.vipCoin}积分+${details.price}元`:`${details.vipCoin}积分`}}
                <span
                  class="spanimg"
                ></span>
              </p>
              <div class="deltext">
                原价：
                <del>￥{{details.oPrice}}</del>
              </div>
            </div>
            <div class="info-wrapper">
              <!-- <del class="txt" v-if="details.oPrice">总价：{{details.oPrice}} 元</del> -->
              <!-- <span class="txt" v-if="stock>0">库存：{{stock}}</span> -->
              <van-progress
                :percentage="limitNumpre"
                :pivot-text="'已售'+useStock"
                pivot-color="#1c4237"
                stroke-width="20"
                color="linear-gradient(to right, #1c4237, #1c4237)"
                class="purpose"
              />
              <p class="txt" v-if="details.limitNum>0">剩余库存：{{details.limitNum}}</p>
            </div>
          </div>
          <!-- 兑换有效期 -->
          <div class="validity" v-if="details.deadline">
            <span class="title">有效期</span>
            <span class="timer">{{details.deadline}}</span>
          </div>

          <!-- sku--产品套餐 -->
          <!-- <div class="more_ticket" v-if="this.groupId !==null && this.productPartnerList.length>0">
            <p class="title">更多套餐</p>
            <div class="list_item" :key="item.id" v-for="item in productPartnerList">
              <p class="ticket_title">{{item.title}}</p>
              <div>
                <p class="prices red_font">￥{{item.price}}</p>
                <span @click="goBook(item.id)">预定</span>
              </div>
            </div>
          </div>-->

          <!-- 商品详情 -->
          <van-tabs
            class="details-wrapper"
            v-if="details.detail||details.notice"
            v-model="active"
            :line-width="150"
            color="#1c4237"
            title-active-color="#1c4237"
            sticky
          >
            <van-tab v-if="details.notice" title="使用须知" class="tabscontent">
              <div class="detail-wrapper" style="flex:1" v-html="details.notice"></div>
              <div class="clicktab" @click="active = 1">
                <img src="@/assets/images//seckill/toright.png" alt />
                <p>点击查看图文详情≫</p>
              </div>
            </van-tab>
            <van-tab v-if="details.detail" title="图文详情" class="tabscontent">
              <template #title>
                <img class="fire" src="@/assets/images//seckill/fire.png" alt />
                图文详情
              </template>
              <!-- <div class="detail-wrapper" style="flex:1;min-height:500px" v-lazy-container="{ selector: 'img' }" v-html="details.detail.replace(/src/g,'data-src')"></div> -->
              <div class="detail-wrapper" style="flex:1" v-html="details.detail"></div>
              <div class="clicktab1" @click="active = 0">
                <p>≪点击查看产品须知</p>
                <img src="@/assets/images//seckill/toleft.png" alt />
              </div>
            </van-tab>
          </van-tabs>
        </div>
      </div>
    </div>

    <div class="fixed-bar">
      <div class="total">
        <div class="totalitem">
          <img src="@/assets/images//seckill/house.png" alt @click="$router.push('/seckillmodel')" />
          <p>首页</p>
        </div>
        <div @click="toshare()" class="totalitem">
          <img src="@/assets/images//seckill/shareimg.png" alt />
          <p>分享</p>
        </div>
        <!-- <span class="color-red">{{total}}积分+{{details.price>0?details.price+'元':''}}</span> -->
        <!-- <span
          class="color-red"
        >{{total == 0 && details.price == 0? '0元':total == 0 && details.price > 0?`${details.price}元`:total > 0 && details.price > 0?`${total}积分+${details.price}元`:`${total}积分`}}</span>-->
        <!-- <span class="color-red">{{details.price>0?details.price+'元':''}}</span> -->
      </div>
      <button class="disabled" v-if="btnDisabled && !noStock && seckilltime=='距活动结束还有'">
        积分不足
        <p>（我的积分：{{coinNum}}）</p>
      </button>
      <button class="disabled" v-show="noStock">敬请期待</button>
      <button class="disabled" v-show="seckilltime=='距活动开始还有' && !noStock">即将开始</button>
      <button class="disabled" v-show="seckilltime=='本周秒杀已结束' && !noStock">秒杀结束</button>
      <button
        id="bbb"
        @click="showPopup(total)"
        v-show="!btnDisabled && !noStock && seckilltime=='距活动结束还有'"
        v-html="payDesc"
      ></button>
    </div>
    <transition name="router-slid" mode="out-in">
      <router-view></router-view>
    </transition>
  </div>
</template>

<script>
import QRCode from 'qrcodejs2';
import vHead from '@/components/header/head';
import BScroll from 'better-scroll';
import { Swipe, SwipeItem, Stepper, Dialog, Tab, Tabs, Progress } from 'vant';
import { imgBaseUrl, baseUrl } from '@/config/env';
import weixin from '@/components/wx/wx.js';
export default {
  data() {
    return {
      baseUrl,
      limitNumpre: '',
      limitNum: '',
      useStock: 0,
      showtoast: false,
      imgBaseUrl,
      active: 0,
      images: [],
      number: 1,
      price: 100,
      details: [],
      // groupId: '', // 产品组
      // productPartnerList: [], // 产品组套餐
      id: '',
      sourceProductId: '', // 场次id
      cost: '', // 秒杀的积分
      stock: '', // 秒杀库存
      coinNum: 0, // 用户积分
      btnDisabled: false,
      noStock: false,
      isSeckilled: false,
      timer: { d: '0', h: '', m: '', s: '' },
      seckilltime: '',
      nickName: '',
      isAuth: '',
      password: '',
      actcoin: 0,
      vipactcoin: 0,
      nocoin: false
    };
  },
  created() {
    this.show();
    const id = this.$route.query.id;
    this.id = this.$route.query.id;
    // this.sourceProductId = this.$route.query.sourceProductId;
    // this.cost = this.$route.query.cost;
    // this.stock = this.$route.query.stock;
    this.getDetails(id);
    this.$http.post('/tuser/userInfo', {}).then(res => {
      if (res.data.code === '0') {
        this.coinNum = res.data.object.coinAmount;
        console.log(this.coinNum);
        this.nickName = res.data.object.nickName;
        this.isAuth = res.data.object.isAuth;
        if (this.isAuth === '1') {
          if (this.$route.query.password) {
            this.$http
              .post('/seckill/seckillBind', {
                inviterWhiteId: this.$route.query.password,
                inviteeWhiteId: res.data.object.bankUserid,
                userName: res.data.object.username,
                idCardNo: res.data.object.idCardNo,
                telphone: res.data.object.telphone
              })
              .then(result => {
                console.log(result);
              });
          }
          this.$http.post('/seckill/getFromUser', {}).then(res => {
            this.password = res.data.object;
            console.log(res);
            this.initWxChat();
          });
        } else {
          this.initWxChat();
          if (this.$route.query.password) {
            window.sessionStorage.setItem(
              'message',
              this.$route.query.password
            );
            console.log(this.$route.query.password);
          }
          // 未实名
          Dialog.confirm({
            title: '提示',
            message: '您尚未实名',
            confirmButtonText: '前往实名',
            cancelButtonText: '取消'
          })
            .then(() => {
              this.$router.push('/real_name');
            })
            .catch(() => {});
        }
      }
    });
  },
  mounted() {},
  computed: {
    total: function() {
      if (this.number > 99) {
        this.btnDisabled = true;
        return;
      }
      return this.number * this.price;
    },
    payDesc() {
      this.$http.post('/tuser/userInfo', {}).then(res => {
        if (res.data.code === '0') {
          this.coinNum = res.data.object.coinAmount;
          if (this.details.limitNum === 0) {
            console.log(1111);
            this.noStock = true;
            return;
          }
          if (this.coinNum === 0) {
            console.log(this.coinNum);
            this.btnDisabled = true;
            // this.nocoin = true;
          } else if (
            res.data.object.isVip === '1' &&
            // this.coinNum < this.actcoin ||
            this.coinNum < this.vipactcoin
          ) {
            console.log('积分');
            this.btnDisabled = true;
            // this.nocoin = true;
          } else if (
            res.data.object.isVip !== '1' &&
            this.coinNum < this.actcoin
          ) {
            this.btnDisabled = true;
          } else {
            this.btnDisabled = false;
            document.getElementById('bbb').innerHTML = '立即抢';
            return '立即抢';
          }
          //  else if (this.seckilltime === '距活动开始还有') {
          //   this.btnDisabled = true;
          //   document.getElementById('bbb').innerHTML = '即将开始';
          // } else if (this.seckilltime === '本周秒杀已结束') {
          //   this.btnDisabled = true;
          //   document.getElementById('bbb').innerHTML = '已结束';
          // } else {
          //   console.log(this.seckilltime);
          //   this.btnDisabled = false;
          //   document.getElementById('bbb').innerHTML = '立即抢';
          //   return '立即抢';
          // }
        }
      });
    }
  },
  methods: {
    initWxChat() {
      const url = window.location.href.split('#')[0];
      const param = {
        title: '邮储美周末--超值秒杀日',
        desc: '1元起秒杀 “邮”你来兑',
        link:
          baseUrl +
          'entrance/goto?redir=' +
          encodeURIComponent(
            window.location.href.split('#')[1] + '&password=' + this.password
          ),
        imgUrl: 'http://img.580travel.com/youchu/miaosha.jpg',
        localUrl: url
      };
      weixin.wxChat(this, param);
    },
    toshare() {
      this.showtoast = true;
      console.log(this.password);
      this.qrcode(
        baseUrl +
          '/entrance/goto?redir=' +
          encodeURIComponent(
            'seckillDetail?id=' + this.id + '&password=' + this.password
          )
      );
      // this.$router.push({
      //   path: '/haibao',
      //   query: { id: this.id }
      // });
    },
    qrcode(content) {
      console.log(content);
      // eslint-disable-next-line
      const qrcode = new QRCode('qrcode', {
        width: 75,
        height: 75, // 高度
        text: content // 二维码内容
        // render: 'canvas' // 设置渲染方式（有两种方式 table和canvas，默认是canvas）
        // background: '#f0f'
        // foreground: '#ff0'
      });
      const canvas = document.getElementById('myCanvas');
      const context = canvas.getContext('2d');
      const that = this;
      var img = new Image();
      img.src = require('../../assets/images/seckill/white.jpg');
      // img.src = that.imgBaseUrl + that.images[0];
      img.onload = function() {
        context.drawImage(this, 0, 0, 1080, 1900);
        context.font = '55px Arial';
        context.fillStyle = 'black';
        context.shadowBlur = 0;
        context.fillText('积分“邮”好礼，每周抢惊喜', 230, 130);
        context.fillStyle = '#999999';
        context.fillText(that.nickName, 550, 250);
        context.fillStyle = '#ff91a8';
        context.moveTo(500, 1340);
        context.lineTo(830, 1340);
        context.lineTo(830, 1390);
        context.lineTo(500, 1390);
        context.lineTo(500, 1340);
        context.strokeStyle = '#ffffff';
        // 描边的直线并没有闭合成一个封闭的形状
        context.stroke();
        context.fill();
        context.fillStyle = '#1c4237';
        context.moveTo(90, 1200);
        context.lineTo(90, 1550);
        context.lineTo(990, 1550);
        context.lineTo(990, 1200);
        context.lineTo(90, 1200);
        context.strokeStyle = '#919191';
        context.lineWidth = 0.8;
        context.stroke();
        context.fill();
        context.fillStyle = 'white';
        context.font = '35px Arial';
        context.fillText('超值秒杀日秒杀价', 525, 1376);
        context.fillStyle = 'white';
        context.font = '40px Arial';
        context.fillText(that.details.title, 130, 1300);
        context.fillStyle = '#white';
        context.font = '35px Arial';
        // context.fillText(that.details.realSubTitle, 130, 1370);
        context.fillStyle = '#9c9da1';
        context.font = '35px Arial';
        // context.fillText(that.details.oPrice + '元', 400, 1440);
        context.fillStyle = '#ffd19b';
        context.font = '45px Arial';
        context.fillText(
          that.details.coin + '积分' + '+' + that.price + '元',
          130,
          1380
        );
        context.fillText(
          that.details.vipCoin + '积分' + '+' + that.price + '元',
          130,
          1460
        );
        // context.moveTo(500, 1330);
        // context.lineTo(600, 1330);
        // context.stroke();
        context.fillStyle = '#919191';
        context.font = '35px Arial';
        context.fillText('长按识别二维码', 350, 1660);
        context.fillText('直达购买！', 350, 1730);
        context.fillText('本商品由银商旅行580提供', 350, 1840);
        const img2 = new Image();
        img2.src = document.getElementsByTagName('img')[0].src;
        img2.onload = () => {
          context.drawImage(img2, 90, 1630, 220, 220);
          document.getElementsByTagName('img')[1].src = canvas.toDataURL(
            'image/png',
            1
          );
          that.loading = false;
        };
      };
      setTimeout(() => {
        const img3 = new Image();
        img3.setAttribute('crossOrigin', 'anonymous');
        img3.src = that.imgBaseUrl + that.details.poster;
        img3.setAttribute('crossOrigin', 'anonymous');
        img3.onload = () => {
          context.drawImage(img3, 90, 300, 900, 900);
          const img4 = new Image();
          img4.src = require('../../assets/images/seckill/zbtb.png');
          img4.onload = () => {
            context.drawImage(img4, 500, 1430, 100, 31);
            document.getElementsByTagName('img')[1].src = canvas.toDataURL(
              'image/png',
              1
            );
          };
          that.loading = false;
        };
      }, 200);
    },
    // 获取是否有秒杀过数据
    // hasSeckilled() {
    //   this.$http
    //     .post('coin/exchangeSecKill', {
    //       sourceProductId: this.sourceProductId
    //     })
    //     .then(res => {
    //       console.log('有', res);
    //     });
    // },

    // 进入页面，获取弹窗提示
    // getDialog() {
    //   Dialog.alert({
    //     message:
    //       '   &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;亲爱的小主，由于近期积分商城产品兑换火爆，兑换后可能因发券系统不稳定，未能第一时间给您发送券码，请耐心等待，造成不便，敬请谅解！如遇紧急情况，请联系客服热线：0592-5990299',
    //     messageAlign: 'left',
    //     confirmButtonText: '知道了'
    //   });
    // },

    show() {
      this.$nextTick(() => {
        if (!this.scroll) {
          this.scroll = new BScroll(this.$refs.detail, {
            click: true,
            preventDefaultException: {
              tagName: /^(INPUT|TEXTAREA|BUTTON|SELECT|IMG|P|SPAN)$/
            }
          });
        } else {
          this.scroll.refresh();
        }
      });
    },

    showPopup(cost) {
      if (this.details.limitNum === 0) {
        Dialog.alert({
          message: '您来晚了，礼品已经被兑换完了',
          confirmButtonText: '看看别的'
        });
        return;
      }
      this.$router.push({
        path: '/seckillstatus',
        query: {
          id: this.id
        }
      });
    },

    getDetails(id) {
      this.$http.post('seckill/product', { id: id.toString() }).then(res => {
        if (res) {
          if (res.data.code === '0') {
            const data = res.data.object;
            this.images = data.pics ? data.pics.split(',') : [];
            this.details = data;
            this.price = data.price;
            this.actcoin = data.coin;
            this.vipactcoin = data.vipCoin;
            this.useStock = data.useStock;
            this.limitNum = data.limitNum;
            this.limitNumpre = (data.useStock / data.limitNum) * 100;
            res.data.object.startDate = new Date(
              res.data.object.startDate.replace(/-/g, '/')
            ).getTime();
            res.data.object.endDate = new Date(
              res.data.object.endDate.replace(/-/g, '/')
            ).getTime();
            const arr = [];
            arr[0] = res.data.object;
            console.log(res.data.object.startDate);
            console.log(res.data.object);
            // this.price = data.coin;// 原页面用的
            // this.groupId = data.groupId;
            // this.getMoreTicket();
            // 获取秒杀时间
            // arr.map((n, index) => {
            // this.seckillData.list.push(n);
            setInterval(() => {
              const nowTime = new Date().getTime();
              if (nowTime < res.data.object.startDate) {
                // this.seckillData.typeTop.push('即将开始');
                // this.seckillData.typeLeft[index] = '距开始';
                this.seckilltime = '距活动开始还有';

                const time = (res.data.object.startDate - nowTime) / 1000; // 获取天、时、分、秒

                const d = parseInt(time / (60 * 60 * 24));
                const h = parseInt((time % (60 * 60 * 24)) / 3600);
                const m = parseInt(((time % (60 * 60 * 24)) % 3600) / 60);
                const s = parseInt(((time % (60 * 60 * 24)) % 3600) % 60);
                this.timer.d = d;
                this.timer.h = h;
                this.timer.m = m;
                this.timer.s = s;
                // console.log(h);
              } else if (
                nowTime >= res.data.object.startDate &&
                nowTime < res.data.object.endDate
              ) {
                // this.seckillData.typeTop.push('正在秒杀');
                // this.seckillData.typeLeft[index] = '距结束';
                this.seckilltime = '距活动结束还有';
                const time = (res.data.object.endDate - nowTime) / 1000; // 获取天、时、分、秒
                const d = parseInt(time / (60 * 60 * 24));
                const h = parseInt((time % (60 * 60 * 24)) / 3600);
                const m = parseInt(((time % (60 * 60 * 24)) % 3600) / 60);
                const s = parseInt(((time % (60 * 60 * 24)) % 3600) % 60);
                this.timer.d = d;
                this.timer.h = h;
                this.timer.m = m;
                this.timer.s = s;
              } else if (nowTime >= res.data.object.endDate) {
                // this.seckillData.typeTop.push('秒杀结束');
                this.seckilltime = '本周秒杀已结束';
              }
            }, 1000);
            // });
            setTimeout(() => {
              this.scroll.refresh();
            }, 1000);
          }
        }
      });
    }

    // 获取更多套餐列表
    // getMoreTicket() {
    //   // 有些产品没有groupId不需要调这个查询多套餐接口
    //   if (this.groupId) {
    //     this.$http
    //       .post('coin/productPartner', { groupId: this.groupId })
    //       .then(res => {
    //         if (res.data.code === '0') {
    //           this.productPartnerList = res.data.object.filter(
    //             item => item.id.toString() !== this.$route.query.id.toString()
    //           );
    //         }
    //       });
    //   }
    // },
    // goBook(id) {
    //   this.$router.replace({
    //     path: '/points/detail/',
    //     query: {
    //       id: id
    //     }
    //   });
    // }
  },
  watch: {
    $route(to, from) {
      this.show();
      const id = this.$route.query.id;
      this.id = this.$route.query.id;
      this.getDetails(id);
      this.$http.post('/tuser/userInfo', {}).then(res => {
        if (res.data.code === '0') {
          this.coinNum = res.data.object.coinAmount;
        }
      });
    }
  },
  components: {
    vHead,
    'van-swipe': Swipe,
    'van-swipe-item': SwipeItem,
    'van-stepper': Stepper,
    'van-tab': Tab,
    'van-tabs': Tabs,
    'van-progress': Progress
  }
};
</script>

<style lang="scss" scoped>
.toast {
  display: block;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.7);
  position: fixed;
  top: 0;
  left: 0;
  z-index: 100;
  .toceter {
    width: 571px;
    height: 984px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    .bottomtext {
      text-align: center;
      font-size: 30px;
      z-index: 300;
      color: #ffffff;
      margin-top: 30px;
      .haibaotext {
        display: inline-block;
        width: 45px;
        height: 45px;
        background-image: url(../../assets/images/seckill/click.png);
        background-size: 100%;
        background-repeat: no-repeat;
      }
    }
  }
  .turnoff {
    width: 55px;
    height: 55px;
    background-image: url(../../assets/images/seckill/turnoff.png);
    background-size: 100%;
    background-repeat: no-repeat;
    position: absolute;
    top: 50px;
    right: 30px;
  }
}
.detail {
  position: fixed;
  left: 0;
  top: 0px;
  bottom: 88px;
  z-index: 10;
  width: 100%;
  background: #ebebeb;
  transform: translate3d(0, 0, 0);
  overflow: scroll;
}

.van-swipe {
  background-color: #fff;
  .van-swipe-item {
    img {
      width: 100%;
      max-height: 400px;
    }
  }
  .van-swipe__indicator--active {
    color: #fff;
  }
}

.product-wrapper {
  padding: 30px;
  background-color: #ffffff;
  position: relative;
  margin-bottom: 20px;
  // display: flex;
  // justify-content: space-between;
  .title {
    @include sc(34px, #050507);
    font-weight: 400;
  }
  .subTitle {
    @include sc(26px, #9c9da1);
  }
  .integral {
    font-weight: normal;
    font-stretch: normal;
    line-height: 30px;
    letter-spacing: 0px;
    @include sc(33px, #f90619);
    span {
      font-weight: normal;
      letter-spacing: 0px;
      @include sc(28px, #5c5b60);
    }
    .spanimg {
      background-image: url(../../assets/images/seckill/zbtb.png);
      background-size: 100%;
      background-repeat: no-repeat;
      display: inline-block;
      width: 81px;
      height: 26px;
    }
  }
  .deltext {
    padding-top: 10px;
    @include sc(22px, #999);
  }
  .info-wrapper {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    // align-items: center;
    margin-top: 5px;
    align-self: flex-end;
    .txt {
      @include sc(24px, #7f7e81);
    }
  }
  p {
    margin-top: 10px;
  }
  .van-stepper {
    position: absolute;
    right: 30px;
    bottom: 30px;
  }
}
.validity {
  height: 88px;
  background-color: #ffffff;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 30px;
  font-size: 30px;
  margin-bottom: 20px;
  .timer {
    color: #7f7d7d;
  }
}

// 套餐
.more_ticket {
  background-color: #fff;
  margin-top: 30px;
  margin-bottom: 30px;
  .title {
    font-size: 28px;
    padding: 30px;
  }
  .list_item {
    padding: 30px;
    width: 100%;
    height: 120px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-top: 0.027rem solid #ebebeb;
    .ticket_title {
      width: 5.5rem;
      color: #414141;
      font-size: 0.35rem;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
    }
    div {
      display: flex;
      align-items: center;
      justify-content: space-between;
      .prices {
        font-size: 0.38rem;
        margin-right: 0.24rem;
      }
      span {
        width: 1.2rem;
        height: 0.6rem;
        background-color: #296ecb;
        border-radius: 0.08rem;
        color: #fff;
        font-size: 0.32rem;
        text-align: center;
        line-height: 0.6rem;
      }
    }
  }
}
.two {
  width: 10rem;
  height: 1.5rem;
  background-color: #ffffff;
  box-shadow: 0rem 0.03rem 0rem 0rem rgba(195, 192, 192, 0.35);
  // border-bottom: 1px solid #cccccc;
  p {
    text-align: center;
    font-size: 0.48rem;
    color: #fa0000;
    font-weight: 600;
    padding-top: 0.29rem;
  }
  .fontSizeG {
    @include sc(36px, #565656);
    padding-top: 0.51rem;
  }
  .timeWrap {
    height: 110px;
    display: flex;
    justify-content: center;
    color: #565656;
    font-size: 0.4rem;
    font-weight: 600;
    align-items: center;
    margin-top: 13px;
    border-top: 1px solid #e2e2e2;
    border-bottom: 1px solid #e2e2e2;
    .txtStart {
      font-size: 0.44rem;
      color: #565656;
      margin-right: 0.39rem;
    }
    .green {
      width: 0.63rem;
      height: 0.53rem;
      background-color: #ff0000;
      border-radius: 0.07rem;
      text-align: center;
      font-size: 0.33rem;
      color: #fdfcfb;
    }
  }
  .seckillOver {
    color: #565656;
  }
}
.details-wrapper {
  background-color: #fff;
  .head {
    height: 85px;
    border-bottom: 2px solid #489be9;
    @include sc(36px, #3889ff);
    display: flex;
    align-items: center;
    justify-content: center;
  }
}
.fixed-bar {
  width: 100%;
  display: flex;
  z-index: 99;
  position: fixed;
  bottom: 0;
  left: 0;
  height: 88px;
  background-color: #ffffff;
  .total {
    width: 60%;
    @include sc(22px, #1c1c1e);
    display: flex;
    align-items: center;
    justify-content: space-around;
    .totalitem {
      display: flex;
      flex-direction: column;
      align-items: center;
      img {
        height: 37px;
      }
    }
  }
  button {
    border: none;
    background-color: #1c4237;
    width: 40%;
    @include sc(32px, #fafafb);
    &.disabled {
      background-color: #b7b6b7;
      font-size: 30px;
    }
    p {
      font-size: 24px;
    }
  }
}
.detail-wrapper {
  padding: 20px;
  img {
    max-width: 100%;
    height: 100%;
  }
}
img {
  max-width: 100% !important;
}
.router-slid-enter-active,
.router-slid-leave-active {
  transition: all 0.4s;
}
.router-slid-enter,
.router-slid-leave-active {
  transform: translate3d(2rem, 0, 0);
  opacity: 0;
}
.seckilltime {
  width: 100%;
  height: 90px;
  background-image: url(../../assets/images/seckill/seckilltime.png);
  background-size: 100%;
  background-repeat: no-repeat;
  background-color: #ffffff;
  margin: 0px auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-end;
  color: #1c4237;
  p {
    padding-right: 80px;
  }
}
.acttime {
  display: flex;
  padding-right: 20px;
  .green {
    width: 32px;
    height: 32px;
    background-color: #1c4237;
    border-radius: 0.07rem;
    text-align: center;
    font-size: 0.33rem;
    color: #fdfcfb;
  }
}
.purpose {
  width: 320px;
  z-index: 10000;
  border-radius: 20px;
}
.fire {
  height: 43px;
  margin-top: -10px;
}
.clicktab {
  width: 690px;
  height: 106px;
  background-color: #ffffff;
  box-shadow: 0px 3px 19px 0px rgba(0, 0, 0, 0.35);
  border-radius: 15px;
  margin: 20px auto;
  display: flex;
  justify-content: center;
  align-items: center;
  img {
    width: 67px;
    height: 42px;
  }
  p {
    font-size: 28px;
    color: #020202;
    padding-left: 20px;
  }
}
.clicktab1 {
  width: 690px;
  height: 106px;
  background-color: #ffffff;
  box-shadow: 0px 3px 19px 0px rgba(0, 0, 0, 0.35);
  border-radius: 15px;
  margin: 20px auto;
  display: flex;
  justify-content: center;
  align-items: center;
  img {
    width: 67px;
    height: 42px;
    margin-left: 20px;
  }
  p {
    font-size: 28px;
    color: #020202;
  }
}
.tabscontent {
  padding-bottom: 30px;
}
</style>
